<template>
  <div style="height: 100%">
    <!-- 外廓 -->
    <div class="all">
      <!-- <el-alert
        title="该功能登录后才可以用哦!"
        type="info"
        effect="dark"
        v-if="alert"
      >
      </el-alert> -->
      <!-- 首页轮播图 -->
      <div style="width: 90%">
        <el-carousel :interval="4000" type="card" style="padding-top: 10px">
          <el-carousel-item
            v-for="item in CarouselItems"
            :key="item.CarouselUrl"
          >
            <img
              :src="item.CarouselUrl"
              style="width: 100%; height: 100%"
              alt=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 分割线 -->
      <el-divider content-position="right">
        <h3>{{ message }}</h3>
      </el-divider>
      <!-- Blog日志 -->
      <div style="padding-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>Blog日志</span>
          </div>
          <div class="block" v-for="item in LogItems" :key="item.LogId">
            <el-timeline>
              <el-timeline-item :timestamp="item.LogDate" placement="top">
                <el-card>
                  <div style="padding-bottom:15px">
                    <h3 style="color: red">{{ item.LogText }}</h3>
                  </div>
                  <div>
                    <h4 style="position: absolute; right: 10px; bottom: 5px">
                      {{ item.LogRemarks }}
                    </h4>
                  </div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div></el-card
        >
      </div>
      <!-- 关于Bsea -->
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>关于Bsea</span>
          </div>
          <v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
            <v-timeline-item
              v-for="item in AboutItems"
              :key="item.AboutTitle"
              :color="item.AboutColor"
              :icon="item.AboutIcon"
              fill-dot
            >
              <v-card :color="item.AboutColor" dark>
                <v-card-title class="text-h6">
                  {{ item.AboutTitle }}
                </v-card-title>
                <v-card-text class="white text--primary">
                  <p style="font:400 18px Arial; font-weight: 64px; padding-top: 20px">
                    {{ item.AboutText }}
                  </p>
                </v-card-text>
              </v-card>
            </v-timeline-item>
          </v-timeline>
        </el-card>
      </div>
    </div>

    <!-- 登陆提示
    <div class="text-center ma-2">
      <v-snackbar v-model="snackbar">
        {{ text }}
        <template v-slot:action="{ attrs }">
          <v-btn color="pink" text v-bind="attrs" @click="snackbar = false">
            关闭
          </v-btn>
        </template>
      </v-snackbar>
    </div> -->
  </div>
</template>
<script>
import { request } from "../../network/request";
export default {
  name: "BlogIndex",
  data: () => ({
    // snackbar: false,
    text: "",
    message: "认真生活,热爱生活!",
    CarouselItems: [],
    LogItems: [],
    AboutItems: [],
    alert: false,
  }),
  created() {
    // console.log(typeof(this.$route.params.alert));
    // this.snackbar = this.$route.params.snackbar;

    request({
      url: "admin/gethomeindex",
      method: "GET",
    })
      .then((res) => {
        // console.log(res.data.date);
        // console.log(eval(res.data.date));
        for (var i = 0; i < eval(res.data.date).length; i++) {
          if (
            eval(res.data.date)[i]["AboutColor"] != "" &&
            eval(res.data.date)[i]["AboutIcon"] != "" &&
            eval(res.data.date)[i]["AboutTitle"] != "" &&
            eval(res.data.date)[i]["AboutText"] != ""
          ) {
            this.AboutItems.push(eval(res.data.date)[i]);
          }
          if (
            eval(res.data.date)[i]["CarouselDate"] != "" &&
            eval(res.data.date)[i]["CarouselId"] != "" &&
            eval(res.data.date)[i]["CarouselUrl"] != ""
          ) {
            this.CarouselItems.push(eval(res.data.date)[i]);
          }
          if (
            eval(res.data.date)[i]["LogDate"] != "" &&
            eval(res.data.date)[i]["LogId"] != "" &&
            eval(res.data.date)[i]["LogRemarks"] != "" &&
            eval(res.data.date)[i]["LogText"] != ""
          ) {
            this.LogItems.push(eval(res.data.date)[i]);
          }
        }
        // console.log(this.CarouselItems, this.LogItems);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {
    this.alert = this.$route.params.alert;
    if (this.alert == true) {
      this.openwarning();
    }
  },
  methods: {
    openwarning() {
      this.$message({
        message: "该功能需要登陆后才能使用哦!",
        type: "warning",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.all {
  display: flex;
  height: 100%;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: space-around;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>